<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>
        <script src="../js/index.js"></script>
        <script src="../js/element/element.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">
        <link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/maincontent.css">

        <link rel="stylesheet" href="../css/newmain.css">
     
    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="dialogmain" id="app">
            <el-button type="primary" @click="showFirst">时段设置1</el-button>

            <el-button type="primary" @click="showSecond">时段设置2</el-button>
              
       

            <el-dialog
                title="时段设置"
                :visible.sync="dialogFirstVisible"
                :close-on-click-modal="false"
                :show-close="false"
                width="850px"
                class="searchdiv">
                <div class="searchdiv">
                    <el-form ref="form" label-width="70px">
                        <el-form-item label="时段模式">
                            <el-select v-model="region" placeholder="请选择">
                                <el-option label="自定义时段" value="1"></el-option>
                                <el-option label="天文时段" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="时区" v-if="region==2">
                            <el-select v-model="regionnext" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="经度" v-if="region==2">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item label="经度" v-if="region==2">
                            <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    stripe
                    >
                    <el-table-column
                        prop="name"
                        label="时段"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        
                        label="开始时间"
                        width="250">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.begintime" v-if="region==2" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                            <el-time-select v-if="region==1"
                                v-model="scope.row.begintime"
                                
                                placeholder="选择时间">
                                </el-time-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                        
                        label="切换时间调整时间（分钟）">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.second"  :min="1" :max="10" ></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        
                        label="启用"
                        width="180">
                        <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.start"
                                    active-color="#13ce66"
                                    inactive-color="#ddd">
                                </el-switch>
                        </template>

                    </el-table-column>
                </el-table>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogFirstVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFirstVisible = false">保 存</el-button>
                </span>
            </el-dialog>


            <el-dialog
                title="时段设置"
                :visible.sync="dialogSecondVisible"
                :close-on-click-modal="false"
                :show-close="false"
                width="900px"
                class="searchdiv">
                <div class="searchdiv">
                    <el-form ref="form" label-width="130px">
                        <el-form-item label="空闲时段控制方式">
                            <el-select v-model="region" placeholder="请选择">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        
                    </el-form>
                </div>
                <el-table
                    :data="tableSecondData"
                    style="width: 100%;"
                    stripe
                    height="385"
                    >
                    <el-table-column
                        prop="name"
                        label="名称"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        
                        label="开始时间"
                        width="150">
                        <template slot-scope="scope">
                            <el-time-select
                                v-model="scope.row.begintime"
                                
                                placeholder="选择时间">
                                </el-time-select>
                                
                        </template>
                    </el-table-column>
                    <el-table-column
                        
                        label="运行时长(S)"
                        width="180">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.second"  :min="1" :max="10" ></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        
                        label="开度">
                        <template slot-scope="scope">
                            <div class="sliderdiv">
                                <el-slider v-model="scope.row.slider"></el-slider>
                                <span>{{scope.row.slider}}%</span>
                            </div>
                            
                        </template>
                    </el-table-column>
                    <el-table-column
                        
                        label="启用"
                        width="180">
                        <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.start"
                                    active-color="#13ce66"
                                    inactive-color="#ddd">
                                </el-switch>
                        </template>

                    </el-table-column>
                </el-table>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogSecondVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogSecondVisible = false">保 存</el-button>
                </span>
            </el-dialog>



        </div>
    </body>

</html>
<script>
    var loginvue=new Vue({
        el: '#app',
        data(){
            return {
                dialogFirstVisible:false,
                input:'0.000000',
                region:"1",
                regionnext:'',
                tableData:[
                    {
                        name:'时段一',
                        begintime:'shanghai',
                        second:1,
                        start:false,
                    },
                    {
                        name:'时段二',
                        begintime:'shanghai',
                        second:1,
                        start:false,
                    },
                    {
                        name:'时段三',
                        begintime:'shanghai',
                        second:1,
                        start:false,
                    }
                ],
                

                dialogSecondVisible:false,
                tableSecondData:[
                    {
                        name:'时段一',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段二',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段三',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段一',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段二',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段三',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段一',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段二',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段三',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    },
                    {
                        name:'时段三',
                        begintime:'',
                        second:1,
                        start:false,
                        slider:25
                    }
                ],

            

              
            }
        },
        computed: {
            
        },
        created() {
           
        },
        mounted(){
            
         
           
        },
        methods:{
            showFirst(){
                this.dialogFirstVisible=true;
            },
            showSecond(){
                this.dialogSecondVisible=true;
            },
           
        }
    })
   
</script>
